<template>
  <div class="hello">
    <div class="card">
      <div>
        <p class="title">后厨出菜统计</p>
      </div>
      <div style="display: flex;flex-direction: column;">
        <div class="cook-item">
          <div
            style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;">
            <div
              style="display: flex;align-items: center;margin-bottom: 20px;justify-content: flex-start;padding: 10px 0;">
              <img src="../assets/logo.png" style="width: 35px;height: 35px;margin-right: 10px;border-radius: 6px;">
              <div style="text-align: left;">
                <p style="margin: 0;font-size: 1rem;font-weight: bold;margin-bottom: 2px;">张三丰</p>
                <span style="font-size: .4rem;font-weight: normal;color: rgb(189, 189, 189);">边锅A</span>
              </div>
            </div>
            <div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;color: #FE5D4D">实出菜：<span
                    style="color: #333;font-weight: bold;font-size: .8rem;">1233</span></p>
              </div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;color: #3BA4FF">应出菜：<span
                    style="color: #333;font-weight: bold;font-size: .8rem;">2345</span></p>
              </div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;">平均出菜时间：2<span>m</span> </p>
              </div>
            </div>
          </div>
          <div style="flex: 1;background-color: #f8f8f8;border-radius: 6px;">
            <canvas id="pie1" width="180"></canvas>
          </div>
        </div>

        <div class="cook-item">
          <div
            style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;">
            <div
              style="display: flex;align-items: center;margin-bottom: 20px;justify-content: flex-start;padding: 10px 0;">
              <img src="../assets/logo.png" style="width: 35px;height: 35px;margin-right: 10px;border-radius: 6px;">
              <div style="text-align: left;">
                <p style="margin: 0;font-size: 1rem;font-weight: bold;margin-bottom: 2px;">张三丰</p>
                <span style="font-size: .4rem;font-weight: normal;color: rgb(189, 189, 189);">边锅A</span>
              </div>
            </div>
            <div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;color: #FE5D4D">实出菜：<span
                    style="color: #333;font-weight: bold;font-size: .8rem;">1233</span></p>
              </div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;color: #3BA4FF">应出菜：<span
                    style="color: #333;font-weight: bold;font-size: .8rem;">2345</span></p>
              </div>
              <div style="text-align: left;">
                <p style="font-size: .8rem;line-height: 18px;">平均出菜时间：2<span>m</span> </p>
              </div>
            </div>
          </div>
          <div style="flex: 1;background-color: #f8f8f8;border-radius: 6px;">
            <canvas id="pie2" width="180"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div>
        <p class="title">门店出菜统计</p>
      </div>
      <div style="display: flex;width: 100%;">
        <div style="flex: 1;">
          <h2>23,453</h2>
          <div>
            <span class="tag" style="background-color: #40A9FF;"></span>
            <span>出菜总数</span>
          </div>
        </div>
        <div style="flex: 1;">
          <h2>2,453</h2>
          <div>
            <span class="tag" style="background-color: #FF7875;"></span>
            <span>应出菜数</span>
          </div>
        </div>
        <div style="flex: 1;">
          <h2>3,453</h2>
          <div>
            <span class="tag" style="background-color: #FFC069;"></span>
            <span>实际出菜</span>
          </div>
        </div>
      </div>
      <div style="width: 100%;">
        <canvas id="stack" height="70"></canvas>
      </div>
    </div>
    <div class="card" style="padding-left: 10px;padding-right: 10px;">
      <div style="text-align: left;">
        <div>
          <p class="title">菜品平均制作时间</p>
        </div>
        <div>
          <h2 style="display: inline-block;margin: 0;">1.8</h2><span>m</span>
        </div>
      </div>
      <div style="margin-top: 18px;">
        <div class="dish-item">
          <div style="display: flex;justify-content: space-between;">
            <div style="display: inline-block;">
              <span>藤椒酸汤黑鱼</span>
              <div style="width: 100%;height: 2px;background-color: #f0f1f2;position: relative;">
                <div style="background-color: #FF7875;position: absolute;left: 0;bottom: 0; height: 2px; width: 20%;">
                </div>
              </div>
            </div>
            <div>
              <span>2</span>
              <span>M</span>
            </div>
          </div>
        </div>
        <div class="dish-item">
          <div style="display: flex;justify-content: space-between;">
            <div style="display: inline-block;">
              <span>周麻婆脆皮鸭</span>
              <div style="width: 100%;height: 2px;background-color: #f0f1f2;position: relative;">
                <div style="background-color: #FF7875;position: absolute;left: 0;bottom: 0; height: 2px; width: 24%;">
                </div>
              </div>
            </div>
            <div>
              <span>2</span>
              <span>M</span>
            </div>
          </div>
        </div>
        <div class="dish-item">
          <div style="display: flex;justify-content: space-between;">
            <div style="display: inline-block;">
              <span>橄榄菜炒四季豆</span>
              <div style="width: 100%;height: 2px;background-color: #f0f1f2;position: relative;">
                <div style="background-color: #84b6e0;position: absolute;left: 0;bottom: 0; height: 2px; width: 74%;">
                </div>
              </div>
            </div>
            <div>
              <span>2</span>
              <span>M</span>
            </div>
          </div>
        </div>
        <div class="dish-item">
          <div style="display: flex;justify-content: space-between;">
            <div style="display: inline-block;">
              <span>周麻婆飘香鱼</span>
              <div style="width: 100%;height: 2px;background-color: #f0f1f2;position: relative;">
                <div style="background-color: #84b6e0;position: absolute;left: 0;bottom: 0; height: 2px; width: 90%;">
                </div>
              </div>
            </div>
            <div>
              <span>2</span>
              <span>M</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card" style="display: flex;justify-content: space-between;padding-right: 10px; padding-left: 10px;">
      <div style="display: flex;">
        <div style="flex: 1;">
          <div>
            <h2 style="display: inline-block;">2.3</h2>
            <span>m</span>
          </div>
          <div>
            <span style="color:#0062b2;font-weight: bold;">后厨出菜平均时间</span>
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <div style="flex: 1;">
          <div>
            <h2 style="display: inline-block;">2</h2>
            <span>m</span>
          </div>
          <div>
            <span style="color:#0062b2;font-weight: bold;">平均上菜时间</span>
          </div>
        </div>
      </div>
      <div style="display: flex;">
        <div style="flex: 1;">
          <div>
            <h2 style="display: inline-block;">18</h2>
            <span>m</span>
          </div>
          <div>
            <span style="color:#0062b2;font-weight: bold;">订单平均完成时间</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div>
        <p class="title">15分钟订单完成率</p>
      </div>
      <div>
        <canvas id="area"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
  import F2 from '@antv/f2';
  // import _ from 'lodash';

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    mounted() {
      const data = [{
        name: '出菜总数',
        月份: 'Jan.',
        月均降雨量: 38.9
      }, {
        name: '应出菜数',
        月份: 'Jan.',
        月均降雨量: 18.9
      }, {
        name: '实际出菜',
        月份: 'Jan.',
        月均降雨量: 12.4
      }];
      const chart = new F2.Chart({
        id: 'stack',
        pixelRatio: window.devicePixelRatio
      });
      chart.source(data, {
        月均降雨量: {
          tickCount: 5
        }
      });
      chart.coord({
        transposed: true
      });

      chart.legend(false).axis(false)

      chart.interval()
        .position('月份*月均降雨量')

        .color('name', ['#40A9FF', '#FF7875', '#FFC069'])
        .adjust('stack');
      chart.render();


      // pie1
      const pieData1 = [{
        name: '实出菜',
        percent: 83.59,
        a: '1'
      }, {
        name: '应出菜',
        percent: 92,
        a: '1'
      }];

      const map = {};
      pieData1.forEach(function (obj) {
        map[obj.name] = obj.percent + '%';
      });

      const pieChart1 = new F2.Chart({
        id: 'pie1',
        pixelRatio: window.devicePixelRatio,
        padding: [20, 'auto']
      });
      pieChart1.source(pieData1, {
        percent: {
          formatter: function formatter(val) {
            return val + '%';
          }
        }
      });
      pieChart1.coord('polar', {
        transposed: true,
        innerRadius: 0.7,
        radius: 0.85
      });
      pieChart1.tooltip(false);
      pieChart1.legend(false);
      pieChart1.axis(false);
      pieChart1.interval()
        .position('a*percent')
        .color('name', ['#FE5D4D', '#3BA4FF'])
        .adjust('stack');
      pieChart1.render();


      // pie2
      const pieData2 = [{
        name: '实出菜',
        percent: 83.59,
        a: '1'
      }, {
        name: '应出菜',
        percent: 92,
        a: '1'
      }];

      const pieChart2 = new F2.Chart({
        id: 'pie2',
        pixelRatio: window.devicePixelRatio,
        padding: [20, 'auto']
      });
      pieChart2.source(pieData2, {
        percent: {
          formatter: function formatter(val) {
            return val + '%';
          }
        }
      });
      pieChart2.coord('polar', {
        transposed: true,
        innerRadius: 0.7,
        radius: 0.85
      });
      pieChart2.tooltip(false);
      pieChart2.legend(false);
      pieChart2.axis(false);
      pieChart2.interval()
        .position('a*percent')
        .color('name', ['#FE5D4D', '#3BA4FF'])
        .adjust('stack');
      pieChart2.render();


      // area
      const areaData = [{
          time: '8',
          tem: 5
        },
        {
          time: '10',
          tem: 15
        },
        {
          time: '12',
          tem: 65
        },
        {
          time: '15',
          tem: 45
        },
        {
          time: '18',
          tem: 55
        },
        {
          time: '22',
          tem: 12
        }
      ]

      const areaChart = new F2.Chart({
        id: 'area',
        pixelRatio: window.devicePixelRatio
      });

      areaChart.source(areaData, {
        time: {
          type: 'cat',
          tickCount: 6,
          range: [0, 1]
        },
        tem: {
          tickCount: 6,
          min: 0
        }
      });

      areaChart.tooltip({
        showCrosshairs: true,
        onShow: function onShow(ev) {
          var items = ev.items;
          items[0].name = '订单数';
        }
      });

      areaChart.axis('time', {
        label: function label(text, index, total) {
          const textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          textCfg.text = text + 'm';
          return textCfg;
        }
      });

      areaChart.area()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
      areaChart.line()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
      areaChart.render();

        // 默认展示 tooltip
        var item = {
          time: '15',
          tem: 45
        }; 
        // 要展示 tooltip 的数据
        var point = areaChart.getPosition(item); // 获取该数据的画布坐标
        areaChart.showTooltip(point); // 展示该点的 tooltip
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  h2 {
    margin: 0.8rem 0;
    margin-right: 2px;
  }

  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .tag {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .card {
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px #ccc;
  }

  span {
    font-size: .8rem;
  }

  .title {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #0062b2;
  }

  .dish-item {
    line-height: 40px;
  }

  .cook-item {
    display: flex;
    margin-bottom: 20px;
  }

  .hello{
    padding-bottom: 50px;
  }
</style>